<template>
    <div class="report_box">
        <el-row :gutter="20">
            <el-col :span="4" style="height:calc(100vh - 80px);">
                <el-table ref="singleTableRef" :data="state.gridData" height="100%" highlight-current-row
                    @current-change="handleCurrentChange" current-row-key="code">
                    <el-table-column property="type" label="报表类型" />
                    <el-table-column label="">
                        <template #default="scope">
                            <el-button link type="primary" @click="handleClickBtn(scope.row)">点击查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="20">
                <router-view v-slot="{ Component }">
                    <keep-alive>
                        <component :is="Component" />
                    </keep-alive>
                </router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';

const route = useRoute()
const router = useRouter()
const singleTableRef = ref()
const state = reactive({
    gridData: [
        {
            code: 1,
            name: "medicalReport",
            path: "/reportmedicalfk",
            type: "医疗点报表",
        },
        {
            code: 2,
            name: "hospitalReport",
            path: "/medicalpreportfk",
            type: "定点医院报表",
        },
    ],
});
const handleCurrentChange = (val) => {
    singleTableRef.value?.setCurrentRow(val)
    router.push(val.path)
}
const handleClickBtn = (row) => {
    handleCurrentChange(row)
}
onBeforeMount(() => { })
onMounted(() => {
    // 当前路由path
    let path = route.path
    let findRowItem = state.gridData.find(item => item.path == path)
    singleTableRef.value?.setCurrentRow(findRowItem)
})
</script>
<style scoped>
.report_box {
    width: calc(100vw - 100px);
    margin: 10px;
    height: calc(100vh - 80px);
}
</style>